<template>
  <div id="box">
    <van-tabs
      v-model="active"
      line-width="14px"
      line-height="3px"
      color="#299772"
      title-active-color="#299772"
      title-inactive-color="#000"
      swipeable
      sticky
      animated
      offset-top="0px"
    >
      <van-tab title="推荐">
        <Tui></Tui>
        <Tui></Tui>
      </van-tab>
      <van-tab title="商业地产">
        <ShangYe></ShangYe>
      </van-tab>
      <van-tab title="二手房">二手房</van-tab>
      <van-tab title="新房">新房</van-tab>
      <van-tab title="租房">租房</van-tab>
      <van-tab title="海外地产">海外地产</van-tab>
      <van-tab title="装修">装修</van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Tui from "./Article/Tui.vue";
import ShangYe from "./Article/ShangYe.vue";
export default {
  name: "Tab",
  components: {
    Tui,
    ShangYe,
  },
  data() {
    return {
      active: 0,
    };
  },
};
</script>

<style scoped>
#box {
  height: auto;
}
#box /deep/ .van-tabs .van-tabs__wrap .van-tabs__nav .van-tab {
  font-weight: bold;
}
#box /deep/ .van-tabs .van-tabs__wrap .van-tabs__nav .van-tab--active {
  font-size: 0.18rem;
}
</style>
